<template>
  <div class="safe">
    <van-nav-bar
      title="安全中心"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <div class="operate">
      <van-cell title="修改密码" is-link @click="isEditPass = true" />
      <van-cell title="退出登录" is-link @click="isLogOut = true" />
      <van-cell title="注销账号" is-link @click="isLogOf = true" />
    </div>
    <div>
      <van-popup v-model="isEditPass" position="bottom" closeable>
        <div class="edit">
          <h2>修改密码</h2>
          <div class="inp">
            <van-field
              v-model="oldPassword"
              :type="isOldPass ? 'password' : 'text'"
              label="旧密码"
              placeholder="输入密码(6-16位)"
              :right-icon="isOldPass ? 'closed-eye' : 'eye-o'"
              @click-right-icon="isOldPass = !isOldPass"
            />
            <van-field
              v-model="password"
              :type="isPass ? 'password' : 'text'"
              label="新密码"
              placeholder="输入密码(6-16位)"
              :right-icon="isPass ? 'closed-eye' : 'eye-o'"
              @click-right-icon="isPass = !isPass"
            />
          </div>
          <div class="button">
            <van-button block color="#CC9145" @click="editPass"
              >保存</van-button
            >
          </div>
        </div>
      </van-popup>
      <van-popup v-model="isLogOut" :style="{ height: '20%', width: '80%' }">
        <div class="edit">
          <h2>退出登录</h2>
          <p>是否退出登录？</p>
          <div class="button">
            <van-button
              block
              square
              plain
              color="#CC9145"
              @click="isLogOut = false"
              >取消</van-button
            >
            <van-button block square color="#CC9145" @click="logOut"
              >确认</van-button
            >
          </div>
        </div>
      </van-popup>
      <van-popup v-model="isLogOf" :style="{ height: '20%', width: '80%' }">
        <div class="edit">
          <h2>注销账号</h2>
          <p>是否注销账号，一旦注销无法恢复！</p>
          <div class="button">
            <van-button
              block
              square
              plain
              color="#CC9145"
              @click="isLogOf = false"
              >取消</van-button
            >
            <van-button block square color="#CC9145" @click="logOf"
              >确认</van-button
            >
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import "../assets/less/safe.less";
import { utils } from "../assets/js/utils";
export default {
  name: "Safe",
  data() {
    return {
      isPass: true,
      isOldPass: true,
      isEditPass: false,
      isLogOut: false,
      isLogOf: false,
      oldPassword: "",
      password: "",
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    logOut() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "POST",
        url: "/logout",
        data: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log('res logout ==> ', res);
          this.$toast.clear();

          if (res.data.code === "F001") {
            this.isLogOut = false;
            this.$router.push({ name: "Login" });
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    logOf() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "POST",
        url: "/destroyAccount",
        data: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log('res logof ==> ', res);
          this.$toast.clear();

          if (res.data.code === "G001") {
            this.isLogOf = false;
            this.$router.push({ name: "Login" });
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    editPass() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      let passData = {
        oldPassword: {
          value: this.oldPassword,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "手机号输入错误",
        },
        password: {
          value: this.password,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "密码输入错误",
        },
      };
      if (!utils.validForm(passData)) {
        return;
      }
      this.$axios({
        method: "POST",
        url: "/updatePassword",
        data: {
          appkey: this.appkey,
          tokenString,
          password: this.password,
          oldPassword: this.oldPassword,
        },
      })
        .then((res) => {
          // console.log('res updatePassword ==> ', res);
          this.$toast.clear();

          if (res.data.code === "E001") {
            this.isEditPass = false;
            this.$router.push({ name: "Login" });
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>